<template>
  <div class="tab-bar-item" @click="btnclick">
    <div v-if= "!isActive"><slot  name="itme-icon"></slot></div>
    <div v-else><slot  name="itme-icon-active"></slot></div>
    <div :style="activeStyle"><slot name="itme-text"></slot></div>
  </div>
<!--  <div class="tab-bar-item">分类</div>-->
<!--  <div class="tab-bar-item">购物车</div>-->
<!--  <div class="tab-bar-item">我的</div>-->
</template>

<script>
  export default {
    name: "tabbarItem",
    props:{
      path: String,
      activeColor: {
        type: String,
        default: 'orange',
      }
    },
    data(){
      return {
        // isActive: false
      }
    },
    computed:{
      isActive(){
        return this.$route.path===this.path
      },
      activeStyle(){
        return this.isActive ? {color: this.activeColor}:{ }
      }
    },
    methods:{
      btnclick(){
        console.log(this.path);
        // this.isActive = !this.isActive
        this.$router.replace('/location')
        this.$router.replace(this.path)
      }
    }
  }
</script>

<style scoped>
  .tab-bar-item{
    flex: 1;
    text-align: center;
    height: 49px;
  }
  .tab-bar-item img{
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
    height: 24px;
    width: 24px;
  }

</style>
